 <template>
  <div class="bg_page">
    <header-bar title="支付结果" :interceptReturn="true" @return="goBack"></header-bar>
    <result-panel :result-data="resultData"></result-panel>
    <recommend-goods-list :list="goodsListData"></recommend-goods-list>
    <div class="no_data_block" v-if="goodsListData.length == 0 && !isLoading">
      <no-data-panel></no-data-panel>
    </div>
    <div>
      <infinite-load v-if="goodsListData.length > 0" :scroll-target="scrollTarget" :is-loading="isLoading" :tipsShow="tipsShow" :is-nomore="isNomre" @load="getNextData"></infinite-load>
    </div>
 
  </div>
</template>

<script>
import HeaderBar from "@/components/header.vue"
import infiniteLoad from '@/components/infiniteLoad.vue';
import RecommendGoodsList from '@/views/common/goodsList/recommendGoodsList.vue';
import ResultPanel from '@/views/common/resultPanel/resultPanel.vue';
import {mapState,mapActions} from 'vuex';
import native from '@/libs/native/index';
export default {
  props: {
   
  },
  components:{
    HeaderBar,
    infiniteLoad,
    ResultPanel,
    RecommendGoodsList
  },

  data() {
    return {
      scrollTarget: '#scrollPanel',
      isLoading: false,
      isNomre: false,
      tipsShow: true,
      currentPage:1,
      orderId:'',
      goodsListData:[],
      statusType:'waiting',
      statusText:'支付中',
      statusSubText:'系统处理中，请稍等',
      statusBtns:[
        {
          text:'查看订单',
          cb:this.viewOrder
        },
        {
          text:'继续逛逛',
          cb:this.returnToIndex
        }
      ]
    }
  },
  computed: {
    ...mapState({
     
    }),
    resultData(){
      return {
        status: this.statusType,
        text: this.statusText,
        subText: this.statusSubText,
        btns:this.statusBtns
      }
    }

  },
  created() {
    this.orderId = this.$route.query.orderId || '';
    this.getPayResult();
    this.getRecommendAppGoodsList();
  },
  filters:{
 
  },
  methods: {
    ...mapActions(['toggleLoading','showMsg','showModal']),
    getPayResult(){
      this.$ajax.getPayResult({
        orderId:this.orderId
      }).then((res)=>{
        this.clearTimer();
        if(res.data == 'FINISHED' || res.data == 'WAIT_SEND' || res.data == 'WAIT_RECEIVE'){
          this.setSuccessStstus();
        }else if(res.data == 'PAY_FAILED'){
          this.setFailStatus();
        }else{
          this.timer = setTimeout(()=>{
            this.getPayResult();
          },3000)
        }
      });
    },

    setSuccessStstus(){
      this.statusType = 'success';
      this.statusText = '支付成功';
      this.statusSubText = '卖家会在48小时内发货给您，请耐心等待';
    },

    setFailStatus(){
      this.statusType = 'fail';
      this.statusText = '支付失败';
      this.statusSubText = '支付失败，可前往订单页查看详情';
    },
    
    getRecommendAppGoodsList(){
      if(this.currentPage == 1){
        this.toggleLoading({flag:true});
      };
      this.isLoading = true;

      this.$ajax.getRecommendAppGoodsList({
        queryBody:{
      
        },
        page:{
          size:10,
          current:this.currentPage
        }
      }).then((res)=>{
        this.toggleLoading({flag:false});
        if(this.isLoading){
          this.isLoading = false;
        };
        if(res.code == '0000'){
          if(!this.tipsShow){
            this.tipsShow = true;
          };
         
          if(res.data.records.length < 10){
            this.isNomre = true;
          };
          if(this.currentPage == 1){
            this.goodsListData = res.data.records;
          }else{
            this.goodsListData = [...this.goodsListData,...res.data.records];
          }
        }
      });
    },

    getNextData(){
      this.isLoading = true;
      this.currentPage++;
      this.getRecommendAppGoodsList()
    },
    
    viewOrder(){
      // if(!this.orderId){
      //   this.showMsg({content:'订单生成中，请稍后'});
      //   return;
      // };
      this.$router.push({
        name:'orderDetail',
        query:{
          type:2,
          orderId:this.orderId,
        }
      });
    },
    returnToIndex(){
      native.goHome();
    },

    goBack(){
      let originType = this.$route.query.originType;
      if(originType == 'h5'){
        this.$router.go(-1);
      }else{
        native.closeWebPage();
      }
    },

    clearTimer(){
      clearTimeout(this.timer);
      this.timer = null;
    }

  },
  beforeDestroy(){
     this.clearTimer();
  }
}
</script>

<style lang="less" scoped>
  .bg_page{
    background-color: #F6F6F6;
    min-height: 100%;
  }
  .no_data_block{
    padding-top: 1.6rem;
  }

</style>
